<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 企业官网</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <style>
        .parallax-bg {
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .gradient-overlay {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(79, 70, 229, 0.9));
        }
        .nav-link {
            position: relative;
            transition: all 0.3s ease;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #4f46e5;
            transition: width 0.3s ease;
        }
        .nav-link:hover::after {
            width: 100%;
        }
        .nav-link.active {
            color: #4f46e5;
        }
        .nav-link.active::after {
            width: 100%;
        }
        .contact-card {
            transition: all 0.3s ease;
        }
        .contact-card:active {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .contact-icon {
            transition: all 0.3s ease;
        }
        .contact-card:active .contact-icon {
            transform: scale(1.1);
            color: #4f46e5;
        }
        .form-input {
            transition: all 0.3s ease;
        }
        .form-input:focus {
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
        }
        .submit-btn {
            transition: all 0.3s ease;
        }
        .submit-btn:active {
            background-color: #4338ca;
            transform: translateY(-2px);
        }
        .map-container {
            transition: all 0.3s ease;
        }
        .map-container:active {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .social-icon {
            transition: all 0.3s ease;
        }
        .social-icon:active {
            transform: translateY(-3px);
            color: #4f46e5;
        }
        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
            background-size: cover;
            background-repeat: no-repeat;
        }
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .flashing {
            animation: flashing 2s linear infinite;
        }
        @keyframes flashing {
            0% { opacity: 0; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }
        .bottom-nav {
            box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .bottom-nav-item {
            transition: all 0.3s ease;
        }
        .bottom-nav-item.active {
            color: #4f46e5;
        }
        .bottom-nav-item.active .bottom-nav-icon {
            color: #4f46e5;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="fixed w-full z-50 bg-white/80 backdrop-blur-md shadow-sm">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <a href="index-mobile.html" class="text-xl font-bold text-indigo-600">LOGO</a>
                <button class="text-gray-600">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="pb-20">
        <!-- 联系我们头部 -->
        <section class="relative h-64 overflow-hidden">
            <div class="absolute inset-0 parallax-bg" style="background-image: url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80');"></div>
            <div class="absolute inset-0 gradient-overlay"></div>
            <div class="wave"></div>
            <div class="relative container mx-auto px-4 h-full flex flex-col justify-center items-center text-center text-white">
                <h1 class="text-3xl font-bold mb-2" data-aos="fade-up">联系我们</h1>
                <p class="text-base text-indigo-100 max-w-xs mx-auto" data-aos="fade-up" data-aos-delay="200">
                    无论您有任何问题、建议或合作意向，我们都期待与您沟通交流
                </p>
                <div class="flex space-x-3 mt-6" data-aos="fade-up" data-aos-delay="400">
                    <a href="#contact-form" class="bg-white text-indigo-600 px-4 py-1.5 rounded-lg text-sm font-medium active:bg-indigo-50 transition-all">
                        在线咨询
                    </a>
                    <a href="#contact-info" class="bg-transparent border-2 border-white text-white px-4 py-1.5 rounded-lg text-sm font-medium active:bg-white/10 transition-all">
                        联系方式
                    </a>
                </div>
            </div>
        </section>

        <!-- 联系信息卡片 -->
        <section class="py-10 bg-white" id="contact-info">
            <div class="container mx-auto px-4">
                <div class="text-center mb-8">
                    <h2 class="text-2xl font-bold text-gray-800 mb-2" data-aos="fade-up">多种方式联系我们</h2>
                    <p class="text-gray-600 text-sm max-w-xs mx-auto" data-aos="fade-up" data-aos-delay="200">
                        我们提供多种联系方式，您可以选择最便捷的方式与我们取得联系
                    </p>
                </div>
                <div class="space-y-4">
                    <!-- 电话联系 -->
                    <div class="contact-card bg-white p-6 rounded-xl shadow-md text-center" data-aos="fade-up">
                        <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-phone-alt text-xl text-indigo-600 contact-icon"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-1">电话联系</h3>
                        <p class="text-gray-600 text-sm mb-3">工作日 9:00-18:00</p>
                        <a href="tel:+8612345678901" class="text-indigo-600 font-medium text-sm active:text-indigo-700">
                            +86 123 4567 8901
                        </a>
                    </div>

                    <!-- 邮件联系 -->
                    <div class="contact-card bg-white p-6 rounded-xl shadow-md text-center" data-aos="fade-up" data-aos-delay="100">
                        <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-envelope text-xl text-indigo-600 contact-icon"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-1">邮件联系</h3>
                        <p class="text-gray-600 text-sm mb-3">24小时内回复</p>
                        <a href="mailto:contact@company.com" class="text-indigo-600 font-medium text-sm active:text-indigo-700">
                            contact@company.com
                        </a>
                    </div>

                    <!-- 微信联系 -->
                    <div class="contact-card bg-white p-6 rounded-xl shadow-md text-center" data-aos="fade-up" data-aos-delay="200">
                        <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fab fa-weixin text-xl text-indigo-600 contact-icon"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-1">微信联系</h3>
                        <p class="text-gray-600 text-sm mb-3">扫描二维码添加</p>
                        <div class="w-28 h-28 bg-gray-200 mx-auto rounded-lg overflow-hidden">
                            <img src="https://via.placeholder.com/128" alt="微信二维码" class="w-full h-full object-cover">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 联系表单和地图 -->
        <section class="py-10 bg-gray-50" id="contact-form">
            <div class="container mx-auto px-4">
                <div class="space-y-6">
                    <!-- 联系表单 -->
                    <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up">
                        <h2 class="text-xl font-bold text-gray-800 mb-4">在线咨询</h2>
                        <form>
                            <div class="space-y-4 mb-4">
                                <div>
                                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                    <input type="text" id="name" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500">
                                </div>
                                <div>
                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                                    <input type="email" id="email" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500">
                                </div>
                                <div>
                                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">电话</label>
                                    <input type="tel" id="phone" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500">
                                </div>
                                <div>
                                    <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
                                    <input type="text" id="subject" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500">
                                </div>
                                <div>
                                    <label for="message" class="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
                                    <textarea id="message" rows="4" class="form-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500"></textarea>
                                </div>
                            </div>
                            <button type="submit" class="submit-btn w-full bg-indigo-600 text-white py-2.5 rounded-lg font-medium active:bg-indigo-700">
                                提交留言
                            </button>
                        </form>
                    </div>

                    <!-- 地图 -->
                    <div class="map-container bg-white p-6 rounded-xl shadow-md" data-aos="fade-up">
                        <h2 class="text-xl font-bold text-gray-800 mb-4">公司地址</h2>
                        <div class="mb-4">
                            <p class="text-gray-600 text-sm mb-2">
                                <i class="fas fa-map-marker-alt text-indigo-600 mr-2"></i>
                                北京市朝阳区科技园区88号
                            </p>
                            <p class="text-gray-600 text-sm mb-2">
                                <i class="fas fa-subway text-indigo-600 mr-2"></i>
                                地铁10号线科技园站A出口步行5分钟
                            </p>
                            <p class="text-gray-600 text-sm">
                                <i class="fas fa-bus text-indigo-600 mr-2"></i>
                                公交科技园站：101路、202路、303路
                            </p>
                        </div>
                        <div class="h-48 bg-gray-200 rounded-lg overflow-hidden">
                            <!-- 这里可以嵌入实际的地图，例如百度地图或高德地图 -->
                            <img src="https://via.placeholder.com/800x400" alt="地图" class="w-full h-full object-cover">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 社交媒体 -->
        <section class="py-10 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center mb-8">
                    <h2 class="text-2xl font-bold text-gray-800 mb-2" data-aos="fade-up">关注我们</h2>
                    <p class="text-gray-600 text-sm max-w-xs mx-auto" data-aos="fade-up" data-aos-delay="200">
                        关注我们的社交媒体账号，获取最新动态和行业资讯
                    </p>
                </div>
                <div class="flex justify-center space-x-6" data-aos="fade-up" data-aos-delay="400">
                    <a href="#" class="social-icon text-gray-400 active:text-indigo-600 text-2xl">
                        <i class="fab fa-weibo"></i>
                    </a>
                    <a href="#" class="social-icon text-gray-400 active:text-indigo-600 text-2xl">
                        <i class="fab fa-weixin"></i>
                    </a>
                    <a href="#" class="social-icon text-gray-400 active:text-indigo-600 text-2xl">
                        <i class="fab fa-qq"></i>
                    </a>
                    <a href="#" class="social-icon text-gray-400 active:text-indigo-600 text-2xl">
                        <i class="fab fa-linkedin"></i>
                    </a>
                    <a href="#" class="social-icon text-gray-400 active:text-indigo-600 text-2xl">
                        <i class="fab fa-github"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 常见问题 -->
        <section class="py-10 bg-gray-50">
            <div class="container mx-auto px-4">
                <div class="text-center mb-8">
                    <h2 class="text-2xl font-bold text-gray-800 mb-2" data-aos="fade-up">常见问题</h2>
                    <p class="text-gray-600 text-sm max-w-xs mx-auto" data-aos="fade-up" data-aos-delay="200">
                        以下是一些客户经常咨询的问题，希望能帮助您快速找到答案
                    </p>
                </div>
                <div class="space-y-3">
                    <!-- 问题1 -->
                    <div class="bg-white p-4 rounded-xl shadow-sm" data-aos="fade-up">
                        <h3 class="text-base font-semibold text-gray-800 mb-1">如何申请产品演示？</h3>
                        <p class="text-gray-600 text-sm">
                            您可以通过在线咨询表单提交申请，或直接拨打我们的客服电话。我们的销售团队会在24小时内与您联系，安排产品演示时间。
                        </p>
                    </div>
                    <!-- 问题2 -->
                    <div class="bg-white p-4 rounded-xl shadow-sm" data-aos="fade-up" data-aos-delay="100">
                        <h3 class="text-base font-semibold text-gray-800 mb-1">产品价格是多少？</h3>
                        <p class="text-gray-600 text-sm">
                            我们的产品价格根据客户需求和定制化程度有所不同。请通过在线咨询或电话联系我们，我们的销售团队会根据您的具体需求提供详细报价。
                        </p>
                    </div>
                    <!-- 问题3 -->
                    <div class="bg-white p-4 rounded-xl shadow-sm" data-aos="fade-up" data-aos-delay="200">
                        <h3 class="text-base font-semibold text-gray-800 mb-1">是否提供技术支持？</h3>
                        <p class="text-gray-600 text-sm">
                            是的，我们提供全面的技术支持服务。购买产品后，您可以通过电话、邮件或在线客服获取技术支持。我们还提供定期培训和系统升级服务。
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 底部导航栏 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white bottom-nav z-50">
        <div class="flex justify-around items-center h-16">
            <a href="index-mobile.html" class="bottom-nav-item flex flex-col items-center justify-center w-1/5 text-gray-500 text-xs">
                <i class="fas fa-home bottom-nav-icon text-lg mb-1"></i>
                <span>首页</span>
            </a>
            <a href="products-mobile.html" class="bottom-nav-item flex flex-col items-center justify-center w-1/5 text-gray-500 text-xs">
                <i class="fas fa-cube bottom-nav-icon text-lg mb-1"></i>
                <span>产品</span>
            </a>
            <a href="solutions-mobile.html" class="bottom-nav-item flex flex-col items-center justify-center w-1/5 text-gray-500 text-xs">
                <i class="fas fa-lightbulb bottom-nav-icon text-lg mb-1"></i>
                <span>方案</span>
            </a>
            <a href="about-mobile.html" class="bottom-nav-item flex flex-col items-center justify-center w-1/5 text-gray-500 text-xs">
                <i class="fas fa-info-circle bottom-nav-icon text-lg mb-1"></i>
                <span>关于</span>
            </a>
            <a href="contact-mobile.html" class="bottom-nav-item flex flex-col items-center justify-center w-1/5 text-indigo-600 active text-xs">
                <i class="fas fa-envelope bottom-nav-icon text-lg mb-1"></i>
                <span>联系</span>
            </a>
        </div>
    </nav>

    <script>
        // 初始化AOS动画
        AOS.init({
            duration: 800,
            once: true
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const nav = document.querySelector('nav');
            if (window.scrollY > 50) {
                nav.classList.add('bg-white/90', 'shadow-md');
            } else {
                nav.classList.remove('bg-white/90', 'shadow-md');
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    window.scrollTo({
                        top: target.offsetTop - 60,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html> 